<script setup>
import { ref } from 'vue'

const activePlatform = ref('windows')

const platformOptions = [
  { label: 'Windows', value: 'windows', icon: 'Monitor' },
  { label: 'Mac', value: 'mac', icon: 'Apple' },
  { label: 'Oculus', value: 'oculus', icon: 'DCaret' },
  { label: 'HTC Vive', value: 'vive', icon: 'Box' },
  { label: 'PlayStation VR', value: 'psvr', icon: 'VideoPlay' },
]

const systemRequirements = {
  windows: {
    minimum: {
      os: 'Windows 10/11 64bit',
      processor: 'Intel Core i5-9400F / AMD Ryzen 5 3600',
      memory: '16 GB RAM',
      graphics: 'NVIDIA GTX 1660 / AMD RX 5600 XT (6GB VRAM)',
      directx: 'Version 12',
      network: '宽带互联网连接',
      storage: '50 GB 可用空间',
      vr: 'Oculus Rift / HTC Vive / Valve Index',
    },
    recommended: {
      os: 'Windows 10/11 64bit',
      processor: 'Intel Core i7-10700K / AMD Ryzen 7 5800X',
      memory: '32 GB RAM',
      graphics: 'NVIDIA RTX 3070 / AMD RX 6800 (8GB VRAM)',
      directx: 'Version 12',
      network: '宽带互联网连接',
      storage: '50 GB SSD 可用空间',
      vr: 'Oculus Rift / HTC Vive / Valve Index',
    },
  },
  mac: {
    minimum: {
      os: 'macOS 12.0 或更高版本',
      processor: 'Apple M1 芯片',
      memory: '16 GB RAM',
      graphics: '集成GPU',
      network: '宽带互联网连接',
      storage: '50 GB 可用空间',
      vr: '兼容 macOS 的 VR 头显',
    },
    recommended: {
      os: 'macOS 12.0 或更高版本',
      processor: 'Apple M2 Pro 芯片或更高',
      memory: '32 GB RAM',
      graphics: '集成GPU',
      network: '宽带互联网连接',
      storage: '50 GB SSD 可用空间',
      vr: '兼容 macOS 的 VR 头显',
    },
  },
  oculus: {
    minimum: {
      device: 'Oculus Quest 2',
      storage: '10 GB 可用空间',
      battery: '完全充电',
      internet: 'Wi-Fi 连接',
    },
    recommended: {
      device: 'Oculus Quest 3 / Oculus Pro',
      storage: '10 GB 可用空间',
      battery: '完全充电',
      internet: '高速 Wi-Fi 连接',
    },
  },
  vive: {
    minimum: {
      device: 'HTC Vive',
      pc: '符合HTC Vive最低要求的PC',
      space: '2m x 1.5m 活动空间',
      usb: 'USB 3.0端口',
      video: 'HDMI 1.4或DisplayPort 1.2',
    },
    recommended: {
      device: 'HTC Vive Pro',
      pc: '符合HTC Vive Pro推荐要求的PC',
      space: '3m x 3m 活动空间',
      usb: 'USB 3.0端口',
      video: 'DisplayPort 1.2',
    },
  },
  psvr: {
    minimum: {
      console: 'PlayStation 4',
      accessories: 'PlayStation VR 头显, PlayStation Camera',
      storage: '10 GB 可用空间',
      internet: 'PSN 账户和互联网连接',
    },
    recommended: {
      console: 'PlayStation 5',
      accessories: 'PlayStation VR2 头显',
      storage: '10 GB 可用空间',
      internet: 'PSN 账户和高速互联网连接',
    },
  },
}

const gameVersions = [
  {
    name: '标准版',
    price: '¥199',
    features: ['完整游戏体验', '所有基础场景', '标准游戏角色'],
  },
  {
    name: '豪华版',
    price: '¥299',
    features: [
      '完整游戏体验',
      '所有基础场景',
      '额外3个特殊场景',
      '所有角色皮肤',
      '数字艺术书',
      '原声音乐带',
    ],
  },
]
</script>

<template>
  <div class="download">
    <div class="download-hero">
      <div class="cyber-grid"></div>
      <div class="vr-overlay"></div>
      <h1
        class="vr-mega-title vr-floating-title animate__animated animate__fadeIn"
        data-text="游戏下载"
      >
        游戏<span class="highlight">下载</span>
        <span class="glitch-layer">游戏下载</span>
        <span class="glitch-layer">游戏下载</span>
        <div class="digital-noise"></div>
      </h1>
      <p class="cyber-subtitle animate__animated animate__fadeIn animation-delay-1">
        立即获取游戏，开始您的VR冒险
      </p>
      <div class="hero-decoration">
        <div class="download-icon animate__animated animate__pulse animate__infinite">
          <el-icon :size="36"><Download /></el-icon>
        </div>
      </div>

      <div class="data-streams">
        <div class="data-stream stream1">010110110101</div>
        <div class="data-stream stream2">101001101001</div>
        <div class="data-stream stream3">110101001011</div>
        <div class="data-stream stream4">010010110101</div>
      </div>
    </div>

    <div class="download-section">
      <div class="tech-bg"></div>
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><Monitor /></el-icon>
          </div>
          <h2 class="vr-mega-title vr-hologram-title" data-text="选择平台">
            选择<span class="highlight">平台</span>
            <span class="glitch-layer">选择平台</span>
            <span class="glitch-layer">选择平台</span>
            <div class="digital-noise"></div>
          </h2>
          <p class="section-subtitle">我们支持各种VR设备和操作系统</p>
        </div>

        <el-tabs v-model="activePlatform" class="platform-tabs cyber-tabs" stretch>
          <el-tab-pane
            v-for="option in platformOptions"
            :key="option.value"
            :label="option.label"
            :name="option.value"
          >
            <div class="platform-content animate__animated animate__fadeIn">
              <div class="platform-header">
                <div class="platform-icon">
                  <el-icon :size="32"><component :is="option.icon" /></el-icon>
                </div>
                <h3>{{ option.label }}平台下载</h3>
                <div class="platform-line"></div>
              </div>

              <template v-if="['windows', 'mac'].includes(activePlatform)">
                <div class="versions-container">
                  <el-row :gutter="30">
                    <el-col :xs="24" :md="12" v-for="(version, index) in gameVersions" :key="index">
                      <div
                        class="version-card-container animate__animated"
                        :class="index === 0 ? 'animate__fadeInLeft' : 'animate__fadeInRight'"
                        v-intersect
                      >
                        <div class="version-card">
                          <div class="tech-corner top-left"></div>
                          <div class="tech-corner top-right"></div>
                          <div class="tech-corner bottom-left"></div>
                          <div class="tech-corner bottom-right"></div>

                          <h3>{{ version.name }}</h3>
                          <div class="price">{{ version.price }}</div>
                          <ul class="features-list">
                            <li v-for="(feature, fIndex) in version.features" :key="fIndex">
                              <div class="feature-icon">
                                <el-icon><Check /></el-icon>
                              </div>
                              <span>{{ feature }}</span>
                            </li>
                          </ul>
                          <el-button
                            type="primary"
                            size="large"
                            class="download-button cyber-button"
                          >
                            <el-icon><Download /></el-icon>
                            下载 {{ version.name }}
                          </el-button>
                        </div>
                        <div class="card-glow"></div>
                      </div>
                    </el-col>
                  </el-row>
                </div>
              </template>

              <template v-else>
                <div class="store-download animate__animated animate__fadeIn" v-intersect>
                  <div class="store-info">
                    <p>{{ option.label }}版本需要通过官方商店下载。</p>
                    <div class="store-icon">
                      <el-icon :size="80"><component :is="option.icon" /></el-icon>
                      <div class="icon-glow"></div>
                    </div>
                  </div>
                  <el-button type="primary" size="large" class="store-button cyber-button">
                    <el-icon><Link /></el-icon>
                    前往{{ option.label }}商店
                  </el-button>
                </div>
              </template>

              <div class="system-requirements">
                <div class="container">
                  <div class="tech-header animate__animated animate__fadeIn" v-intersect>
                    <div class="tech-icon">
                      <el-icon><SetUp /></el-icon>
                    </div>
                    <h2 class="vr-mega-title vr-floating-title" data-text="系统需求">
                      系统<span class="highlight">需求</span>
                      <span class="glitch-layer">系统需求</span>
                      <span class="glitch-layer">系统需求</span>
                    </h2>
                  </div>
                </div>
                <div class="requirements-tabs">
                  <el-tabs tab-position="top" class="cyber-inner-tabs">
                    <el-tab-pane label="最低配置">
                      <div class="specs-table">
                        <div
                          v-for="(value, key) in systemRequirements[activePlatform].minimum"
                          :key="key"
                          class="spec-row"
                        >
                          <div class="spec-label">
                            {{ key.charAt(0).toUpperCase() + key.slice(1) }}
                          </div>
                          <div class="spec-value">{{ value }}</div>
                        </div>
                      </div>
                    </el-tab-pane>
                    <el-tab-pane label="推荐配置">
                      <div class="specs-table">
                        <div
                          v-for="(value, key) in systemRequirements[activePlatform].recommended"
                          :key="key"
                          class="spec-row"
                        >
                          <div class="spec-label">
                            {{ key.charAt(0).toUpperCase() + key.slice(1) }}
                          </div>
                          <div class="spec-value">{{ value }}</div>
                        </div>
                      </div>
                    </el-tab-pane>
                  </el-tabs>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>

      <div class="tech-particles">
        <div class="particle p1"></div>
        <div class="particle p2"></div>
        <div class="particle p3"></div>
        <div class="particle p4"></div>
        <div class="particle p5"></div>
        <div class="particle p6"></div>
      </div>
    </div>

    <div class="installation-guide">
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><Guide /></el-icon>
          </div>
          <h2 class="section-title">安装<span class="highlight">指南</span></h2>
        </div>

        <div class="steps-container animate__animated animate__fadeIn" v-intersect>
          <el-steps :active="3" finish-status="success" direction="vertical">
            <el-step title="下载游戏">
              <template #description>
                <div class="step-content">
                  <p>选择您的平台并下载游戏文件</p>
                  <div class="step-icon">
                    <el-icon><Download /></el-icon>
                  </div>
                </div>
              </template>
            </el-step>
            <el-step title="安装程序">
              <template #description>
                <div class="step-content">
                  <p>运行安装程序并按照提示操作</p>
                  <div class="step-icon">
                    <el-icon><SetUp /></el-icon>
                  </div>
                </div>
              </template>
            </el-step>
            <el-step title="启动游戏">
              <template #description>
                <div class="step-content">
                  <p>完成安装后打开游戏，进行初始设置</p>
                  <div class="step-icon">
                    <el-icon><VideoPlay /></el-icon>
                  </div>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div>

        <div
          class="support-section animate__animated animate__fadeIn animation-delay-2"
          v-intersect
        >
          <el-alert
            title="需要帮助？"
            type="info"
            description="如果您在下载或安装过程中遇到任何问题，请访问我们的技术支持页面或联系客服。"
            show-icon
            class="cyber-alert"
          />
          <div class="support-options">
            <el-button class="support-button" type="primary" plain>
              <el-icon><Document /></el-icon>技术文档
            </el-button>
            <el-button class="support-button" type="primary" plain>
              <el-icon><ChatLineRound /></el-icon>在线客服
            </el-button>
          </div>
        </div>
      </div>

      <div class="circuit-decoration"></div>
    </div>

    <div class="hardware-recommendations">
      <div class="container">
        <div class="tech-header animate__animated animate__fadeIn" v-intersect>
          <div class="tech-icon">
            <el-icon><Cpu /></el-icon>
          </div>
          <h2 class="section-title">推荐<span class="highlight">硬件</span></h2>
          <p class="section-subtitle">为获得最佳VR体验，我们推荐以下设备</p>
        </div>

        <div class="hardware-grid">
          <div class="hardware-item animate__animated animate__zoomIn" v-intersect>
            <div class="hardware-icon">
              <el-icon><Monitor /></el-icon>
            </div>
            <h3>显示设备</h3>
            <p>Oculus Quest 3或Valve Index VR头显</p>
          </div>
          <div
            class="hardware-item animate__animated animate__zoomIn animation-delay-1"
            v-intersect
          >
            <div class="hardware-icon">
              <el-icon><Cpu /></el-icon>
            </div>
            <h3>处理器</h3>
            <p>Intel i7 12700K或AMD Ryzen 7 5800X3D</p>
          </div>
          <div
            class="hardware-item animate__animated animate__zoomIn animation-delay-2"
            v-intersect
          >
            <div class="hardware-icon">
              <el-icon><Picture /></el-icon>
            </div>
            <h3>显卡</h3>
            <p>NVIDIA RTX 4070 Ti或AMD RX 7900 XT</p>
          </div>
          <div
            class="hardware-item animate__animated animate__zoomIn animation-delay-1"
            v-intersect
          >
            <div class="hardware-icon">
              <el-icon><Connection /></el-icon>
            </div>
            <h3>内存</h3>
            <p>32GB DDR5 高频内存</p>
          </div>
          <div
            class="hardware-item animate__animated animate__zoomIn animation-delay-2"
            v-intersect
          >
            <div class="hardware-icon">
              <el-icon><Opportunity /></el-icon>
            </div>
            <h3>存储</h3>
            <p>1TB NVMe固态硬盘</p>
          </div>
          <div
            class="hardware-item animate__animated animate__zoomIn animation-delay-3"
            v-intersect
          >
            <div class="hardware-icon">
              <el-icon><TrendCharts /></el-icon>
            </div>
            <h3>网络</h3>
            <p>高速WiFi 6或有线千兆网络</p>
          </div>
        </div>
      </div>

      <div class="tech-grid-bg"></div>
    </div>
  </div>
</template>

<style scoped>
.download {
  width: 100%;
  background-color: #0a0a1a;
  color: #ffffff;
  overflow: hidden;
  position: relative;
}

/* Added VR data stream effect */
.download::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    linear-gradient(90deg, transparent 0%, rgba(0, 195, 255, 0.03) 50%, transparent 100%),
    linear-gradient(180deg, transparent 0%, rgba(170, 0, 255, 0.03) 50%, transparent 100%);
  background-size:
    200% 200%,
    100% 200%;
  animation: laser-beam 12s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes laser-beam {
  0% {
    background-position:
      0% 0%,
      0% 0%;
  }
  100% {
    background-position:
      200% 0%,
      0% 200%;
  }
}

/* Digital circuit background */
.download::after {
  content: '';
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600"><path fill="none" stroke="rgba(0, 255, 180, 0.03)" stroke-width="1.5" d="M50,50 L50,150 L150,150 L150,250 L300,250 L300,350 L150,350 L150,450 L250,450 L250,550 M550,50 L450,50 L450,150 L350,150 L350,250 L400,250 L400,350 L300,350 L300,450 L400,450 L400,550"/></svg>');
  opacity: 0.5;
  pointer-events: none;
  z-index: 1;
}

.download-hero {
  height: 50vh;
  background-image: url('https://images.pexels.com/photos/1261820/pexels-photo-1261820.jpeg');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cyber-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(to right, rgba(0, 195, 255, 0.1) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0, 195, 255, 0.1) 1px, transparent 1px);
  background-size: 50px 50px;
  transform: perspective(500px) rotateX(60deg);
  transform-origin: bottom;
  animation: grid-move 15s linear infinite;
  opacity: 0.3;
  z-index: 2;
}

@keyframes grid-move {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 0 50px;
  }
}

.vr-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.9));
  z-index: 1;
}

.vr-mega-title {
  font-size: 4rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 20px;
  color: #fff;
  text-shadow: 0 0 20px rgba(0, 195, 255, 0.8);
  position: relative;
  z-index: 3;
}

.cyber-subtitle {
  font-size: 1.5rem;
  color: #a9c2ff;
  max-width: 700px;
  margin: 0 auto 30px;
  position: relative;
  z-index: 3;
}

.highlight {
  color: #00c3ff;
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, #00c3ff, transparent);
}

/* Enhanced glow effect for highlight */
.highlight {
  animation: neon-pulse 2s infinite alternate;
}

@keyframes neon-pulse {
  0% {
    text-shadow:
      0 0 5px rgba(0, 195, 255, 0.5),
      0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    text-shadow:
      0 0 10px rgba(0, 195, 255, 0.8),
      0 0 20px rgba(0, 195, 255, 0.5),
      0 0 30px rgba(0, 195, 255, 0.3);
  }
}

.hero-decoration {
  position: absolute;
  bottom: 50px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.download-icon {
  width: 80px;
  height: 80px;
  background: rgba(0, 0, 0, 0.5);
  border: 2px solid rgba(0, 195, 255, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00c3ff;
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.5);
}

.animation-delay-1 {
  animation-delay: 0.3s;
}

.animation-delay-2 {
  animation-delay: 0.6s;
}

.animation-delay-3 {
  animation-delay: 0.9s;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  z-index: 2;
}

.tech-header {
  text-align: center;
  margin-bottom: 50px;
  position: relative;
}

.tech-icon {
  width: 60px;
  height: 60px;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 15px;
  box-shadow: 0 0 20px rgba(0, 195, 255, 0.3);
  border: 1px solid rgba(0, 195, 255, 0.3);
  font-size: 24px;
  color: #00c3ff;
}

.section-title {
  text-align: center;
  margin-bottom: 15px;
  font-size: 2.5rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff;
}

.section-subtitle {
  text-align: center;
  color: #a9c2ff;
  font-size: 1.2rem;
  margin-top: -10px;
  margin-bottom: 30px;
}

.download-section {
  padding: 100px 0;
  background-color: #070713;
  position: relative;
  overflow: hidden;
}

.tech-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at 70% 20%, rgba(0, 195, 255, 0.1), transparent 50%);
  z-index: 1;
}

.cyber-tabs {
  --el-tabs-header-background-color: transparent;
  --el-tabs-border-color: rgba(0, 195, 255, 0.2);
  --el-tabs-active-color: #00c3ff;
  --el-tabs-hover-color: #a9c2ff;
  margin-bottom: 40px;
}

:deep(.el-tabs__item) {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  font-weight: 600;
  padding: 0 30px;
  height: 50px;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
}

:deep(.el-tabs__item.is-active) {
  color: #00c3ff;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
}

:deep(.el-tabs__active-bar) {
  background-color: #00c3ff;
  height: 3px;
  border-radius: 3px;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.7);
}

.platform-content {
  padding: 20px 0;
}

.platform-header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.platform-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  color: #00c3ff;
  box-shadow: 0 0 15px rgba(0, 195, 255, 0.3);
  border: 1px solid rgba(0, 195, 255, 0.2);
}

.platform-header h3 {
  font-size: 1.8rem;
  color: #fff;
  margin: 0;
}

.platform-line {
  position: absolute;
  bottom: -15px;
  left: 0;
  width: 100px;
  height: 3px;
  background: linear-gradient(to right, #00c3ff, transparent);
}

.versions-container {
  margin-bottom: 50px;
}

.version-card-container {
  margin-bottom: 30px;
  position: relative;
}

.version-card {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  padding: 30px;
  height: 100%;
  border: 1px solid rgba(0, 195, 255, 0.2);
  position: relative;
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

/* Holographic effect */
.version-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 70%, rgba(0, 195, 255, 0.05), transparent 50%),
    radial-gradient(circle at 70% 30%, rgba(170, 0, 255, 0.05), transparent 50%);
  z-index: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.version-card:hover::before {
  opacity: 1;
}

/* Data lines animation */
.version-card::after {
  content: '';
  position: absolute;
  top: -150%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(0deg, transparent, rgba(0, 195, 255, 0.1), transparent);
  transform: rotate(30deg);
  animation: data-sweep 6s linear infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes data-sweep {
  0% {
    transform: rotate(30deg) translateY(0);
  }
  100% {
    transform: rotate(30deg) translateY(50%);
  }
}

.version-card:hover::after {
  opacity: 1;
}

.version-card:hover {
  transform: translateY(-10px);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.5),
    0 0 30px rgba(0, 195, 255, 0.2);
}

.tech-corner {
  position: absolute;
  width: 15px;
  height: 15px;
  border-color: rgba(0, 195, 255, 0.5);
  z-index: 1;
}

/* Enhanced corner animations */
.top-left {
  top: 10px;
  left: 10px;
  border-top: 2px solid;
  border-left: 2px solid;
  animation: corner-glow 3s infinite alternate;
}

.top-right {
  top: 10px;
  right: 10px;
  border-top: 2px solid;
  border-right: 2px solid;
  animation: corner-glow 3s infinite alternate 0.5s;
}

.bottom-left {
  bottom: 10px;
  left: 10px;
  border-bottom: 2px solid;
  border-left: 2px solid;
  animation: corner-glow 3s infinite alternate 1s;
}

.bottom-right {
  bottom: 10px;
  right: 10px;
  border-bottom: 2px solid;
  border-right: 2px solid;
  animation: corner-glow 3s infinite alternate 1.5s;
}

@keyframes corner-glow {
  0% {
    box-shadow: 0 0 5px rgba(0, 195, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 15px rgba(0, 195, 255, 0.7);
  }
}

.version-card h3 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: #fff;
  text-align: center;
  position: relative;
  z-index: 2;
}

.price {
  font-size: 2.5rem;
  font-weight: 700;
  color: #00c3ff;
  text-align: center;
  text-shadow: 0 0 10px rgba(0, 195, 255, 0.5);
  margin-bottom: 25px;
  position: relative;
  z-index: 2;
  animation: price-pulse 3s infinite alternate;
}

@keyframes price-pulse {
  0% {
    text-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    text-shadow:
      0 0 20px rgba(0, 195, 255, 0.8),
      0 0 30px rgba(0, 195, 255, 0.4);
  }
}

.features-list {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
}

.features-list li {
  margin-bottom: 15px;
  display: flex;
  align-items: center;
  gap: 15px;
  color: rgba(255, 255, 255, 0.9);
}

.feature-icon {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 195, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00c3ff;
}

.download-button {
  width: 100%;
  background: linear-gradient(45deg, #0088ff, #00c3ff);
  border: none;
  padding: 12px 25px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(0, 195, 255, 0.3);
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.download-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 195, 255, 0.5);
}

.card-glow {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80%;
  height: 10px;
  background: rgba(0, 195, 255, 0.3);
  filter: blur(10px);
  border-radius: 50%;
  z-index: -1;
}

.store-download {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  padding: 40px;
  border: 1px solid rgba(0, 195, 255, 0.2);
  text-align: center;
  margin-bottom: 50px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.store-info {
  margin-bottom: 30px;
}

.store-info p {
  font-size: 1.2rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 30px;
}

.store-icon {
  width: 150px;
  height: 150px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(0, 195, 255, 0.2);
  border-radius: 20%;
  margin: 0 auto 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00c3ff;
  position: relative;
}

.icon-glow {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 20%;
  box-shadow: 0 0 30px rgba(0, 195, 255, 0.5) inset;
  opacity: 0.5;
}

.store-button {
  background: linear-gradient(45deg, #0088ff, #00c3ff);
  border: none;
  padding: 12px 30px;
  font-weight: 600;
  letter-spacing: 1px;
  box-shadow: 0 5px 15px rgba(0, 195, 255, 0.3);
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
}

.store-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 195, 255, 0.5);
}

.system-requirements {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  border: 1px solid rgba(0, 195, 255, 0.2);
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.3);
}

.requirements-title {
  display: flex;
  align-items: center;
  gap: 15px;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  font-size: 1.5rem;
  padding: 20px;
  margin: 0;
  border-bottom: 1px solid rgba(0, 195, 255, 0.2);
}

.title-icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 195, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00c3ff;
}

.requirements-tabs {
  padding: 20px;
}

.cyber-inner-tabs {
  --el-tabs-header-background-color: transparent;
  --el-tabs-border-color: rgba(0, 195, 255, 0.2);
}

:deep(.cyber-inner-tabs .el-tabs__item) {
  font-size: 1rem;
  padding: 0 20px;
}

.specs-table {
  margin-top: 20px;
}

.spec-row {
  display: flex;
  border-bottom: 1px solid rgba(0, 195, 255, 0.1);
  padding: 12px 0;
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-label {
  flex: 0 0 30%;
  font-weight: 600;
  color: #a9c2ff;
}

.spec-value {
  flex: 0 0 70%;
  color: rgba(255, 255, 255, 0.9);
}

.tech-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.particle {
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: rgba(0, 195, 255, 0.7);
  border-radius: 50%;
  filter: blur(2px);
  animation: float-up 15s infinite linear;
}

.p1 {
  left: 20%;
  top: 80%;
  animation-duration: 15s;
  animation-delay: 0s;
}

.p2 {
  left: 60%;
  top: 70%;
  animation-duration: 20s;
  animation-delay: 5s;
}

.p3 {
  left: 80%;
  top: 90%;
  animation-duration: 18s;
  animation-delay: 2s;
}

.p4 {
  left: 40%;
  top: 50%;
  animation-duration: 25s;
  animation-delay: 3s;
}

.p5 {
  left: 10%;
  top: 30%;
  animation-duration: 30s;
  animation-delay: 1s;
}

.p6 {
  left: 70%;
  top: 10%;
  animation-duration: 22s;
  animation-delay: 4s;
}

@keyframes float-up {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-1000px) scale(0);
    opacity: 0;
  }
}

.installation-guide {
  padding: 100px 0;
  background-color: #0a0a1a;
  position: relative;
  overflow: hidden;
}

.steps-container {
  max-width: 700px;
  margin: 0 auto 50px;
  position: relative;
  z-index: 2;
}

:deep(.el-step__title) {
  font-size: 1.3rem;
  font-weight: 600;
  color: #fff !important;
}

:deep(.el-step__title.is-process) {
  color: #00c3ff !important;
  font-weight: 700;
}

:deep(.el-step__line) {
  background-color: rgba(0, 195, 255, 0.3);
}

:deep(.el-step__icon.is-text) {
  background: #070713;
  border-color: rgba(0, 195, 255, 0.5);
  color: #00c3ff;
  box-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
}

:deep(.el-step__head.is-process) {
  color: #00c3ff;
  border-color: #00c3ff;
}

:deep(.el-step__icon-inner) {
  font-weight: 700;
}

.step-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.step-content p {
  margin: 0;
  color: rgba(255, 255, 255, 0.8);
  font-size: 1rem;
}

.step-icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 195, 255, 0.1);
  border: 1px solid rgba(0, 195, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00c3ff;
}

.support-section {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.cyber-alert {
  --el-alert-bg-color: rgba(15, 15, 40, 0.5) !important;
  --el-alert-padding: 20px !important;
  border: 1px solid rgba(0, 195, 255, 0.2) !important;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

:deep(.el-alert__title) {
  font-size: 1.2rem !important;
  color: #00c3ff !important;
  font-weight: 600 !important;
}

:deep(.el-alert__description) {
  color: rgba(255, 255, 255, 0.8) !important;
  margin-top: 10px !important;
  font-size: 1rem !important;
}

:deep(.el-alert__icon) {
  color: #00c3ff !important;
  font-size: 24px !important;
}

.support-options {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.support-button {
  --el-button-bg-color: transparent;
  --el-button-border-color: rgba(0, 195, 255, 0.5);
  --el-button-hover-bg-color: rgba(0, 195, 255, 0.1);
  --el-button-hover-border-color: rgba(0, 195, 255, 0.8);
  --el-button-text-color: #00c3ff;
  --el-button-hover-text-color: #fff;
  padding: 12px 25px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.support-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.circuit-decoration {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1440" height="800" viewBox="0 0 1440 800"><path fill="none" stroke="rgba(0, 195, 255, 0.05)" stroke-width="2" d="M0,200 L200,200 L200,400 L400,400 L400,600 L600,600 L600,800 M1440,600 L1240,600 L1240,400 L1040,400 L1040,200 L840,200 L840,0"/></svg>');
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.2;
  z-index: 1;
}

.hardware-recommendations {
  padding: 100px 0;
  background-color: #070713;
  position: relative;
  overflow: hidden;
}

.hardware-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 30px;
  position: relative;
  z-index: 2;
}

.hardware-item {
  background: linear-gradient(145deg, #0c0c24, #1a1a3a);
  border-radius: 15px;
  padding: 30px;
  border: 1px solid rgba(0, 195, 255, 0.2);
  text-align: center;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
  position: relative;
  overflow: hidden;
}

/* Add cyberpunk scanlines */
.hardware-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(transparent 50%, rgba(0, 195, 255, 0.02) 50%);
  background-size: 100% 4px;
  pointer-events: none;
  z-index: 0;
}

/* Add glowing border animation */
.hardware-item::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 195, 255, 0.3),
    rgba(170, 0, 255, 0.3),
    transparent
  );
  background-size: 400% 100%;
  animation: border-flow 6s linear infinite;
  z-index: -1;
  border-radius: 15px;
  opacity: 0;
  transition: opacity 0.3s ease;
}

@keyframes border-flow {
  0% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 400% 0%;
  }
}

.hardware-item:hover::after {
  opacity: 1;
}

.hardware-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

.hardware-icon {
  width: 70px;
  height: 70px;
  background: rgba(0, 0, 0, 0.3);
  border: 2px solid rgba(0, 195, 255, 0.2);
  border-radius: 50%;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 30px;
  color: #00c3ff;
  position: relative;
  /* Add pulsing animation */
  animation: icon-pulse 3s infinite alternate;
}

@keyframes icon-pulse {
  0% {
    box-shadow: 0 0 10px rgba(0, 195, 255, 0.3);
  }
  100% {
    box-shadow: 0 0 25px rgba(0, 195, 255, 0.7);
  }
}

.hardware-item h3 {
  font-size: 1.3rem;
  margin-bottom: 15px;
  color: #fff;
  position: relative;
}

.hardware-item p {
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
}

.tech-grid-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image:
    linear-gradient(rgba(0, 195, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 195, 255, 0.05) 1px, transparent 1px);
  background-size: 50px 50px;
  opacity: 0.2;
  z-index: 1;
  animation: grid-pulse 10s infinite alternate;
}

@keyframes grid-pulse {
  0% {
    opacity: 0.1;
    background-size: 50px 50px;
  }
  100% {
    opacity: 0.3;
    background-size: 55px 55px;
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  .cyber-title {
    font-size: 2.5rem;
  }

  .download-icon {
    width: 60px;
    height: 60px;
  }

  .platform-header {
    flex-direction: column;
    text-align: center;
  }

  .platform-icon {
    margin: 0 auto 15px;
  }

  .platform-line {
    left: 50%;
    transform: translateX(-50%);
  }

  .support-options {
    flex-direction: column;
  }

  .hardware-grid {
    grid-template-columns: 1fr;
  }
}

/* 数据流动画 */
.data-streams {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
}

.data-stream {
  position: absolute;
  font-family: monospace;
  color: rgba(0, 195, 255, 0.8);
  text-shadow: 0 0 5px rgba(0, 195, 255, 0.5);
  font-size: 16px;
  white-space: nowrap;
  opacity: 0.5;
  animation: data-flow 20s linear infinite;
}

.stream1 {
  top: 10%;
  left: 10%;
  font-size: 18px;
  animation-duration: 15s;
}

.stream2 {
  top: 30%;
  left: 80%;
  font-size: 14px;
  animation-duration: 18s;
  animation-delay: 2s;
}

.stream3 {
  top: 60%;
  left: 30%;
  font-size: 20px;
  animation-duration: 20s;
  animation-delay: 5s;
}

.stream4 {
  top: 80%;
  left: 60%;
  font-size: 16px;
  animation-duration: 12s;
  animation-delay: 8s;
}

@keyframes data-flow {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.7;
  }
  90% {
    opacity: 0.7;
  }
  100% {
    transform: translateY(-100px) translateX(-300px);
    opacity: 0;
  }
}
</style>
